import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './my.module.css';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { Outlet } from 'react-router-dom';
import { Switch } from 'antd';

import logo1 from './avatars/logo1.png'
import usertx from './avatars/usertx.png'
import axios from 'axios';

export default function My() {
    const navigate = useNavigate();
    const [userls, setUserls] = useState([]);
    // 样式切换
    const [style, setStyle] = useState(1);

    // 跳转
    const navigateTo = (path) => {
        navigate(path);
    }

    // 样式切换
    const handleStyleChange = (value) => {
        setStyle(value);
    }

    useEffect(() => {

        let ls = JSON.parse(localStorage.getItem('user'));
        setUserls(ls)
        if (style === 1) {
            navigateTo('/my/user');
        } else if (style === 2) {
            navigateTo('/my/recentfile');
        } else if (style === 3) {
            navigateTo('/my/invitemember');
        } else if (style === 4) {
            navigateTo('/my/recyclebin');
        } else if (style === 5) {
            navigateTo('/my/historyfile');
        } else {
            navigateTo('/my/user');
        }

    }, []);








    return (
        <div className={styles.container}>
            <header className={styles.header}>
                <div className={styles.logo}>
                    <img src={logo1} alt="云文件" />
                    <h1>云文件</h1>
                </div>
                <div className={styles.search}>
                    <input type="text" placeholder="输入关键字搜索" />
                </div>
                <div className={styles.actions}>
                    <button className={styles.uploadButton}>上传文件</button>
                    <img src={usertx} alt="用户头像" className={styles.avatar} />
                    <span>Koto</span>
                </div>
            </header>

            <div className={styles.content}>
                <aside className={styles.sidebar}>
                    <button onClick={() => navigate('/home')} className={styles.backButton}>
                        {/* antd的返回箭头 */}
                        <ArrowLeftOutlined />
                        返回仪表盘
                    </button>
                    <nav>
                        <ul>
                            <li className={style === 1 ? styles.active : ''} onClick={() => { handleStyleChange(1); navigateTo('/my/user') }}>
                                <span className={styles.icon}>👤</span>
                                账户设置
                            </li>
                            <li className={style === 2 ? styles.active : ''} onClick={() => { handleStyleChange(2); navigateTo('/my/recentfile') }}>
                                <span className={styles.icon}>📄</span>
                                最近文件
                            </li>
                            <li className={style === 3 ? styles.active : ''} onClick={() => { handleStyleChange(3); navigateTo('/my/invitemember') }}>
                                <span className={styles.icon}>👥</span>
                                邀请成员
                            </li>
                            <li className={style === 4 ? styles.active : ''} onClick={() => { handleStyleChange(4); navigateTo('/my/recyclebin') }} >
                                <span className={styles.icon}>🗑️</span>
                                回收站
                            </li>
                            <li className={style === 5 ? styles.active : ''} onClick={() => { handleStyleChange(5); navigateTo('/my/historyfile') }}>
                                <span className={styles.icon}>📅</span>
                                历史记录
                            </li>
                            <li className={style === 6 ? styles.active : ''}>
                                消息推送  <Switch />
                            </li>
                            <li className={styles.logout} onClick={() => navigateTo('/my/logout')}>
                                <span className={styles.icon}>🚪</span>
                                退出登录
                            </li>
                        </ul>
                    </nav>
                </aside>

                <main className={styles.main}>
                    <Outlet />
                </main>
            </div>
        </div>
    );
}
